const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const Terser  = require("terser-webpack-plugin");

module.exports = {
    mode: 'development',
    entry: {
        index: './src/routes/index.js',
      },
    devtool: 'eval-cheap-source-map',
    devServer: {
        static: './dist',
        port: 9000,
        proxy: {
            '/api': {
              target: 'http://localhost:4000',
              pathRewrite: { '^/api': '/' },
            },
          },
      },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Development',
            template: "./src/index.html", //以该html文件为模板
            inject: "body" //把script添加body 中
        }),
        new MiniCssExtractPlugin({
            filename: "css/[name].[contenthash].css",
          }),
    ],
    output: {
        filename: 'js/[name].[contenthash].bundle.js',
        path: path.resolve(__dirname, 'dist'),
        clean: true,
    },
    module: {
        rules: [{
                test: /\.css$/i,
                use: [MiniCssExtractPlugin.loader, 'css-loader'],
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }

        ]
    },
    optimization: {
        minimizer: [
          new CssMinimizerPlugin(),
          new Terser
        ],
      },
};